<script setup>
import { ref, onMounted } from 'vue';
import { pageSearch } from '@/api/evaluation.js'
import AutocompleteSearch from '@/components/homePage/evaluation/Evaluation-searchInput.vue';
import SearchPagination from '@/components/homePage/evaluation/Evaluation-searchPagination.vue';
import SearchTable from '@/components/homePage/evaluation/Evaluation-searchTable.vue';

//声明搜索数据
const search = ref('')
//声明表格数据
const tableList = ref([]);
//声明分页数据
const pagination = ref({});


//创建时发请求，拿到表格数据
onMounted(
  async () => {
    const res = await pageSearch({ pageNum: 1,pageSize:10, query: { name: '' } })
    tableList.value.setList(res.records);
    pagination.value.setPageTotal(res.total)
  }
)


//条件搜索学生
const searchStudent = async () => {
  const queryName = search.value.getInputValue()
  const queryPage = pagination.value.getTablePage()
  const res = await pageSearch({ pageNum: queryPage.pageNum, pageSize:queryPage.pageSize,query: { teacherName: queryName } })
  tableList.value.setList(res.records);
  pagination.value.setPageTotal(res.total)
}

</script>

<template>
  <div class="search-container">
    <AutocompleteSearch ref="search" @search="searchStudent"/>
  </div>
  <div class="table-container">
    <SearchTable ref="tableList" />
  </div>
  <div class="pagination-container">
    <SearchPagination ref="pagination" @page-search="searchStudent"/>
  </div>
</template>

<style scoped lang="less">
.search-container {
  position: absolute;
  top: 40px;
  left: 120px;
  width: 1200px;
  height: 120px;
  // border: 1px solid #17bedf;
}

.table-container {
  position: absolute;
  top: 200px;
  left: 120px;
  width: 1200px;
  height: 500px;
  // border: 1px solid #17bedf;
}

.pagination-container {
  position: absolute;
  top: 720px;
  left: 120px;
  width: 1200px;
  height: 80px;
  // border: 1px solid #17bedf;
}
</style>
